<template>
    <div>
        <van-popup v-model="$store.state.show" position="left" :style="{ height: '100%',width: '60%' }" class="msak">
            <el-button :style="{background:$store.state.bg,'border-color':$store.state.bg}" type="primary" @click="qbg">切换主题</el-button>
            <el-button :style="{background:$store.state.bg,'border-color':$store.state.bg}" type="primary">下载数据</el-button>
            <el-button :style="{background:$store.state.bg,'border-color':$store.state.bg}" type="primary">导入数据</el-button>
            <el-button :style="{background:$store.state.bg,'border-color':$store.state.bg}" type="primary">编辑数据</el-button>
            <el-button :style="{background:$store.state.bg,'border-color':$store.state.bg}" type="primary">清空数据</el-button>
        </van-popup>
    </div>
</template>

<script>
export default {
    data() {
        return {
            bg:['red','pink','orange','royalblue']
        }
    },
    methods: {
        qbg(){
            let random =Math.floor(Math.random() * this.bg.length) 
            this.$store.commit('qbg',this.bg[random]);
        }
    },
}
</script>

<style lang="scss">
.msak {
    background: rgba(0, 0, 0, .4);
    margin-top: 100px;
    button {
        display: block;
        margin: 20px auto  !important;
    }
}
</style>